<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3911564_ynvs5zhem7p.css">
    <link rel="stylesheet" href="../Css/contractList.css">
    <link rel="stylesheet" href="../Css/btn.css">
    <link rel="stylesheet" href="../bsp/css/bootstrap.css">
</head>

<body>

    <div class="rightmain1">
        <div>
            <div>合同列表</div>
            <div>
                <button class="btn1"><span class="iconfont icon-export"></span>导出</button>
                <button class="btn1"><a href="../contract/contractList.html"><span
                            class="iconfont icon-shuaxin"></span>刷新</a></button>
            </div>
        </div>
    </div>
    <div class="rightmain2">
        <div class="shaixuanList">
            <div><span class="iconfont icon-sousuoxiao"></span><span>筛选查询</span></div>
            <form action="" method="post">
                <div>
                    <div><span class="ispanWidth">合同编号：</span><input type="text" id="hetongbianhao"></div>
                    <div><span class="ispanWidth">合同名称：</span><input type="text" id="hetongmingchen"></div>
                    <div>
                        <span class="ispanWidth">客户名称：</span>
                        <!-- Modal -->
                        <input type="text" value="" id="Client_name1" data-toggle="modal" data-target="#myModal"
                            readonly="true">
                        <Span class="iconfont icon-sousuoxiao spanwz"></Span>
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"
                                            aria-label="Close"><span aria-hidden="true"
                                                class="guanbibtn">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">客户选框</h4>
                                    </div>
                                    <div class="modal-body">
                                        <table id="table2">
                                            <div>
                                                <select name="hetongbianhao" id="">
                                                    <option selected="selected" value="0">--请选择合同编号--</option>
                                                    <option>HT202005010001</option>
                                                    <option>HT202005010002</option>
                                                    <option>HT202005010003</option>
                                                    <option>HT202005010004</option>
                                                </select>
                                                <input type="text" placeholder="请输入内容">
                                                <button type="button" class="btn1">查询</button>
                                                <button type="reset" class="btn1"><a
                                                        href="../contract/contractList.html">重置</a></button>
                                            </div>
                                            <thead>
                                                <tr>
                                                    <th>客户名称</th>
                                                    <th>客户标签</th>
                                                    <th>客户类型</th>
                                                    <th>主要联系人</th>
                                                    <th>手机号码</th>
                                                </tr>
                                            </thead>
                                            <tbody class="DataShow1" id="DataShow1"></tbody>
                                        </table>
                                        <!-- 分页 -->
                                        <nav aria-label="Page navigation">
                                            <ul class="pagination1" id="pagination1"></ul>
                                        </nav>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn1 btn-default" data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn1 btn-default" data-dismiss="modal">确定</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div>
                        <span class="ispanWidth">状态：</span>
                        <select name="" id="zhuangtaiXK">
                            <option selected="selected" value="0">--请选择状态--</option>
                            <option>已保存</option>
                            <option>已审核</option>
                            <option>待审核</option>
                            <option>已驳回</option>
                        </select>
                    </div>
                    <div class="rili">
                        <span class="ispanWidth">合同日期：</span>
                        <div><input type="date" id="contract_day1"></div>
                        <button class="btn1" id="sxcx">查询</button>
                        <button class="btn1" type="reset"><a href="../contract/contractList.html">重置</a></button>
                    </div>
                </div>
            </form>
        </div>
        <div class="dataList">
            <div>
                <div><span class="iconfont icon-liebiao"></span><span>数据列表</span></div>
                <button class="btn1 btnAddData">新增</button>
            </div>
            <table id="table1">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>合同编号</th>
                        <th>合同名称</th>
                        <th>客户</th>
                        <th>合同日期</th>
                        <th>合同总金额（万元）</th>
                        <th>已回款金额（万元）</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody class="DataShow" id="DataShow"></tbody>
            </table>
        </div>
        <nav aria-label="Page navigation">
            <ul class="pagination" id="pagination"></ul>
        </nav>
    </div>



    <script src="../js/jquery-3.6.3.js"></script>
    <script src="../bsp/js/bootstrap.js"></script>
    <script src="../js/database.js"></script>
    <script src="../js/contractManage.js"></script>
    <script>
        var idtzm;
        var arr1 = [];
        var arr2 = [];
        var arr3 = [];
        var arr4 = [];
        var arr5 = [];

        // window.onload = function () {
        //     displayContractData();
        //     displaytableDatakh();
        //     delContractData(); //添加删除事件
        //     addContractDataTZ();
        //     modifyContractDataTZ();
        //     hqidr();
        //     ViewContractDataTZ();
        //     cxVal();
        //     for (let key in db) {
        //         localStorage.setItem(key, JSON.stringify(db[key]))
        //     }
        // }
        $(document).ready(function () {
            displayContractData();
            displaytableDatakh();
            delContractData(); //添加删除事件
            addContractDataTZ();
            modifyContractDataTZ();
            hqidr();
            ViewContractDataTZ();
            cxVal();
            for (let key in db) {
                localStorage.setItem(key, JSON.stringify(db[key]))
            }
        }
        )


        var cmval;
        var idd;
        function hqidr() {
            let cn;
            $(".DataShow1").on("click", ".djuanze", function (e) {
                idd = Number($(e.target).attr("data-id"));
                // console.log(idd);
                cn = db.connection[idd - 1].name;
                $("#Client_name1").val(cn);
                cmval = $("#Client_name1").val();
            });
        }

        //模态框
        function displaytableDatakh() {

            $(".DataShow1").html('');
            // 文档碎片
            let fragment1 = document.createDocumentFragment();
            for (let i = 0; i < db.connection.length; i++) {
                // console.log(db.contract[0]);
                let tr = document.createElement("tr");

                tr.innerHTML = `
                    <td data-id=${db.connection[i].id} class="djuanze">${db.connection[i].name}</td>
                    <td>${db.connection[i].customer_label}</td>
                    <td>${db.connection[i].type}</td>
                    <td>${db.connection[i].linkman}</td>
                    <td>${db.connection[i].phone_number}</td>
                     `;

                fragment1.appendChild(tr);

            }

            $(".DataShow1").append(fragment1);

        }


        //删除合同数据
        function delContractData() {
            $(".DataShow").on("click", ".btnDelete", function (e) {
                // console.log(e.target);
                let id = $(e.target).attr("data-index");
                // console.log(id);
                delContractbyid(id);
            })
        }


        //新增数据
        function addContractDataTZ() {
            $(".btnAddData").click(function () {
                window.location = "../contract/new_addContract.html";
            })
        }

        //跳转修改
        function modifyContractDataTZ() {
            $(".DataShow").on("click", ".btnModify", function (e) {
                idtzm = Number($(e.target).attr("data-index"));
                let url = "../contract/contract_Modify.html";
                $("body").load(url);
            })
        }



        //跳转查看
        function ViewContractDataTZ() {
            $(".DataShow").on("click", ".btnView", function (e) {
                idtzm = Number($(e.target).attr("data-index"));
                // console.log(idtzm1);
                let url = "../contract/contractDetails.html";
                $("body").load(url);

            })
        }




        //数据查询
        function cxVal() {

            let htbh = $("#hetongbianhao");
            let htmc = $("#hetongmingchen");
            let khmc = $("#Client_name1");
            let options = $("#zhuangtaiXK");
            let htrq = $("#contract_day1");

            $("#sxcx").on('click', function (e) {
                // console.log(htbh.val());
                e.preventDefault();

                if (htbh.val() == '') {
                    arr1 = contract;
                } else {
                    contract.forEach(e => {
                        if (e.contract_number == htbh.val()) {
                            arr1.push(e);
                        }
                    });
                }
                // console.log(arr1);
                console.log("arr1", arr1);
                //
                if (htmc.val() == '') {
                    arr2 = arr1;
                } else {
                    arr1.forEach(e => {
                        if (e.contract_name == htmc.val()) {
                            arr2.push(e);
                        }
                    })
                }
                console.log("arr2", arr2);
                //
                if (khmc.val() == '') {
                    arr3 = arr2;
                } else {
                    arr2.forEach(e => {
                        if (e.Client_name == khmc.val()) {
                            arr3.push(e);
                        }
                    })
                }
                console.log("arr3", arr3);
                //
                if (options.val() == '' || options.val() == 0) {
                    arr4 = arr3;
                } else {
                    arr3.forEach(e => {
                        if (e.contract_state == options.val()) {
                            arr4.push(e);
                        }
                    })
                }
                console.log("arr4", arr4);
                //
                if (htrq.val() == "") {
                    arr5 = arr4;
                } else {
                    arr4.forEach(e => {
                        if (e.contract_day == htrq.val()) {
                            arr5.push(e);
                        }
                    })
                }
                console.log('arr5', arr5);
                displayContractData1();

            });


        }














    </script>
</body>

</html>